<div class="container">

  <div class="row p-l-15 p-r-15 m-b-10 m-l-0 m-r-0 dashboard-header">
    <div class="col-xs-5 col-sm-5 col-lg-5 page-header--new p-l-0">
      <h3>
        <edit-in-place editable="$ctrl.layoutEditing" done="$ctrl.saveName" ignore-blanks="true" value="$ctrl.dashboard.name"></edit-in-place>
        <span class="label label-default" ng-if="$ctrl.dashboard.is_draft && !$ctrl.dashboard.is_archived">Unpublished</span>
        <span class="label label-warning" ng-if="$ctrl.dashboard.is_archived" uib-popover="This dashboard is archived and and won't appear in the dashboards list or search results." popover-placement="right" popover-trigger="'mouseenter'">Archived</span>
      </h3>
    </div>
    <div class="col-xs-7 col-sm-7 col-lg-7 text-right dashboard__control p-r-0">
      <span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">
          <div class="btn-group">
            <button type="button" class="btn btn-primary btn-sm"
              ng-disabled="$ctrl.isGridDisabled"
              ng-click="$ctrl.editLayout(false, true)" ng-if="$ctrl.layoutEditing">
              <i class="zmdi zmdi-check"></i> Apply Changes
            </button>

            <button type="button" class="btn btn-default btn-sm"
              ng-disabled="$ctrl.isGridDisabled"
              ng-click="$ctrl.editLayout(false, false)" ng-if="$ctrl.layoutEditing">
              <i class="zmdi zmdi-close"></i> Cancel
            </button>
          </div>

          <button type="button" class="btn btn-default btn-sm" ng-click="$ctrl.togglePublished()" tooltip="Publish Dashboard" ng-if="$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
            <span class="fa fa-paper-plane"></span> Publish
          </button>

          <div class="btn-group" uib-dropdown ng-if="!$ctrl.layoutEditing">
            <button id="split-button" type="button"
                    ng-class="{'btn-default btn-sm': $ctrl.refreshRate === null,'btn-primary btn-sm':$ctrl.refreshRate !== null}"
                    class="btn btn-sm" ng-click="$ctrl.loadDashboard(true)">
              <i class="zmdi zmdi-refresh"></i> {{$ctrl.refreshRate === null ? 'Refresh' : $ctrl.refreshRate.name}}
            </button>
            <button type="button" class="btn" uib-dropdown-toggle
                    ng-class="{'btn-default btn-sm': $ctrl.refreshRate === null,'btn-primary btn-sm':$ctrl.refreshRate !== null}">
              <span class="caret"></span>
              <span class="sr-only">Split button!</span>
            </button>
            <ul class="dropdown-menu pull-right" ng-model="$ctrl.refreshRate" uib-dropdown-menu role="menu" aria-labelledby="split-button">
              <li role="menuitem" ng-repeat="refreshRate in $ctrl.refreshRates">
                <a href="#" ng-click="$ctrl.setRefreshRate(refreshRate)">{{refreshRate.name}}</a>
              </li>
              <li role="menuitem" ng-if="$ctrl.refreshRate !== null">
                <a href="#" ng-click="$ctrl.setRefreshRate(null)">Stop auto refresh</a>
              </li>
            </ul>
          </div>
          <button type="button" class="btn btn-sm" ng-class="{'btn-default': !$ctrl.isFullscreen, 'btn-primary': $ctrl.isFullscreen}" tooltip="Enable/Disable Fullscreen display" ng-click="$ctrl.toggleFullscreen()" ng-if="!$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
            <span class="zmdi zmdi-fullscreen"></span>
          </button>
          <button type="button" class="btn btn-sm" ng-class="{'btn-default': !$ctrl.dashboard.publicAccessEnabled, 'btn-primary': $ctrl.dashboard.publicAccessEnabled}" tooltip="Enable/Disable Share URL" ng-click="$ctrl.openShareForm()" ng-if="($ctrl.dashboard.canEdit() || $ctrl.dashboard.publicAccessEnabled) && !$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
            <span class="zmdi zmdi-share"></span>
          </button>
      </span>
          <div class="btn-group hidden-print" role="group" ng-show="$ctrl.dashboard.canEdit()" uib-dropdown ng-if="!$ctrl.dashboard.is_archived && !$ctrl.layoutEditing">
            <button class="btn btn-default btn-sm dropdown-toggle" uib-dropdown-toggle>
              <span class="zmdi zmdi-more"></span>
            </button>
            <ul class="dropdown-menu pull-right" uib-dropdown-menu>
              <li ng-if="!$ctrl.dashboard.is_archived" ng-class="{hidden: $ctrl.isGridDisabled}"><a ng-click="$ctrl.editLayout(true)">Edit</a></li>
              <li ng-if="$ctrl.showPermissionsControl"><a ng-click="$ctrl.showManagePermissionsModal()">Manage Permissions</a></li>
              <li ng-if="!$ctrl.dashboard.is_draft"><a ng-click="$ctrl.togglePublished()">Unpublish</a></li>
              <li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.archiveDashboard()">Archive</a></li>
            </ul>
          </div>
    </div>
  </div>

  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.layoutEditing">
    <label>
        <input name="input" type="checkbox" ng-model="$ctrl.dashboard.dashboard_filters_enabled" ng-change="$ctrl.updateDashboardFiltersState()">
        Use Dashboard Level Filters
    </label>
  </div>

  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.globalParameters.length > 0">
    <parameters parameters="$ctrl.globalParameters" on-change="$ctrl.onGlobalParametersChange()"></parameters>
  </div>

  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.filters | notEmpty">
    <filters filters="$ctrl.filters" on-change="$ctrl.filtersOnChange(filter, $modal)"></filters>
  </div>

  <div style="overflow: hidden; padding-bottom: 5px;" ng-if="$ctrl.dashboard.widgets.length > 0">
    <div gridster="$ctrl.dashboardGridOptions" class="dashboard-wrapper"
      ng-class="{'preview-mode': !$ctrl.layoutEditing, 'editing-mode': $ctrl.layoutEditing}">
      <div ng-repeat="widget in $ctrl.dashboard.widgets" gridster-item="widget.options.position"
        gridster-auto-height=".scrollbox, .spinner-container">
        <dashboard-widget widget="widget" dashboard="$ctrl.dashboard" on-delete="$ctrl.removeWidget()"></dashboard-widget>
      </div>
    </div>
  </div>

  <div class="add-widget-container" ng-if="$ctrl.layoutEditing">
    <h2>
      <i class="zmdi zmdi-widgets"></i>
      <span class="hidden-xs hidden-sm">Widgets are individual query visualizations or text boxes you can place on your dashboard in various arrangements.</span>
    </h2>
    <a class="btn btn-primary" ng-click="$ctrl.addWidget()">Add Widget</a>
  </div>
</div>
